<template>
  <div>
    <!-- 分类顶部导航区 -->
     <nav-comp :back="false" title="商品分类"></nav-comp>
    <!-- 分类数据区域 -->
    <van-tree-select
      height="100vh"
      :items="cateData"
      :main-active-index.sync="active"
    >
    <!-- 二级分类区 具名作用于插槽 -->
      <template #content>
        <!-- 一级分类标题 -->
       <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >
        {{cateData[active]?cateData[active].catename:""}}
        </van-divider>
        <!-- 分类数据 -->
        <van-grid :column-num="3" :icon-size="60">
        <van-grid-item 
        v-for="item in cateData[active]?cateData[active].children:[]" 
        :key="item.id" 
        :icon="$pre+item.img" 
        :text="item.catenmae"
        @click="goList(item.id)"
        />
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return { 
        active: 0,
        cateData:[],
    };
  },
  mounted() {
    //1.获取所有商品的分类数据
    this.getCates();
  },
  methods: {
    //1.获取所有商品的分类数据
    getCates(){
        this.$api.reqCates()
        .then(res=>{
            // 给分类数据追加text属性 方便展示
            console.log(res)
            let list =res.data.list
            list.forEach(item=>{
                item.text = item.catename
            })
            //赋值页面
            this.cateData =list
            
        })
        .catch(err=>console.log(err))
    },
    //2.跳转到商品列表页面
    goList(cateid){
        this.$router.push('/goodlist?type=2&cateid='+cateid)
    }
  },
};
</script>

<style scoped>
</style>
